<template>
    <div class="main_wrap">
        <div class="department">
            <div class="bgtu">
                <organization
                    class="changeDep"
                    :selectDepartment="curDepartment"
                    @department_select="departmentSelected">
                </organization>
                <div>
                    <span  v-if="$store.state.user && $store.state.user.admin != 5" @click="scanAdd" style="font-size:20px;line-height:54px;margin-left:47%" class="iconfont">&#xe60a;</span>
                </div>
                <div @click.stop="backToHomepage" class="iconBack">
                    <span style="font-size:17px;position:relative;top:6px;" class="iconfont">&#xe668;</span>
                </div>
            </div>
        </div>
        <div class="content_wrap"> 
            <div class="chart">
              <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
            </div>
            <div class="menus">
                <div class="spotCheck">
                    <div
                    @click="spotCheckView"
                    v-if="privilege('wechat_operaionManage','wechat_operaionManage:show:check_record') || privilege('wechat_operaionManage','wechat_operaionManage:save:check_record')">
                        <div class="backImg">
                            <iconSvg name='check' w="30px" h="30px"></iconSvg>
                        </div>
                        <span style="font-size:20px;">点巡检</span>
                        <p :class="(spotCheckNum.length > 3 || replaceExecutedNum.length > 3)? 'samallNumber':'number'"
                            style="text-align:center;margin-top:30px;font-size:30px;font-weight:600;line-height:30px;">
                            <span v-if="spotCheckNum.toString().length>0">{{spotCheckNum}}</span>
                            <span v-else><i class="el-icon-loading"></i></span>
                            <span class="dSpan" v-if="replaceExecutedNum.toString().length>0">{{replaceExecutedNum}}</span>
                            <span class="dSpan" v-else><i class="el-icon-loading"></i></span>
                        </p>
                        <p style="text-align:center;font-size:16px;margin-top:10px;">可执行<span class="dSpan">待执行</span></p>
                    </div>
                </div>
                <div class="changeManage">
                    <div @click="changeRecordView"
                    v-if="privilege('wechat_operaionManage','wechat_operaionManage:show:change_record') || privilege('wechat_operaionManage','wechat_operaionManage:save:change')">
                        <div class="backImg">
                            <iconSvg name='change' w="30px" h="30px"></iconSvg>
                        </div>
                        <span style="font-size:20px;">更换</span>
                        <p :class="(spotCheckNum.length > 3 || replaceExecutedNum.length > 3)? 'samallNumber':'number'"
                            style="text-align:center;margin-top:30px;font-size:30px;font-weight:600;line-height:30px;">
                            <span v-if="replaceRecordNum.toString().length>0">{{replaceRecordNum}}</span>
                            <span v-else><i class="el-icon-loading"></i></span>
                        </p>
                        <p style="text-align:center;font-size:16px;margin-top:10px;">可执行</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Grid, GridItem, XHeader } from 'vux'
// const echarts = require('echarts');
import request from '../../config/request.js';
import DepartmentSelected from "../common/service-department-select";
import Organization from "../common/organization"
import { Privilege } from "@/mixin";
let _this = null

export default {
    components: {
        XHeader,
        Grid,
        GridItem,
        DepartmentSelected,
        Organization
    },
    data(){
        return {
            spotCheckMonth: [],
            replaceRecordMonth: [],
            userActionMap: {},
            spotCheckNum: '',
            sportExecutedNum:0, //
            replaceRecordNum: '',
            replaceExecutedNum:'', //
            url:'',
            curDepartment: {},
            departmentId:0,
            user:{}
        }
    },
    mixins:[Privilege],
    created: function(){
        _this = this
        let localUrl = location.href.split('#')[0];
        this.$http(this.$API.getWxSign,{url:encodeURIComponent(localUrl)}, true,false,true).then((res) => {
            if (res){
                wx.config({
                debug: false,
                appId: res.appId, // 必填,公众号的唯一标识
                timestamp: res.timestamp, // 必填,生成签名的时间戳
                nonceStr: res.nonceStr, // 必填,生成签名的随机串
                signature: res.signature, // 必填,签名
                jsApiList: ['scanQRCode',] // 必填,需要使用的JS接口列表
                });
                /* 处理失败验证 */
                wx.error(function (res) {
                console.log("res:====>",res);
                // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
                });
            }
        });

        this.getDomin();
        let userInfo = request.getUserInfo();
        this.user = userInfo;
        
        
        this.getRecordsData();
        this.getToDealNum();
    },
    mounted(){
        this.curDepartment ={
            departmentName:'全企业',
            id:'0'
        }
    },
    //返回首页的公共方法
    'inject':["backToHomepage"],
    methods:{
        getDomin: function(){
            this.url = window.location.protocol +'//'+ window.location.host
        },
        spotCheckView: function(){
          window.location.href = this.url + '/#/operaionManage/spotCheck?department='+JSON.stringify(this.curDepartment);
        },
        changeRecordView: function(){
          window.location.href = this.url + '/#/manage/deviceDetailManage/addReplace?department='+JSON.stringify(this.curDepartment);
        },

        getReplaceData: function(){
            this.replaceRecordMonth = [];
            this.$http(this.$API.getReplaceRecordByMonth, {departmentId:this.departmentId}, true,false,true).then((res)=>{
                if(res){
                    for(var item of res){
                        this.replaceRecordMonth.push([item.createTime, parseInt(item.count)]);
                    }
                    this.drawLine();
                }
            })
        },

        // 统计最近七天处理的数量
        getRecordsData: function(){
            this.spotCheckMonth = [];
            //运维工单信息
            this.$http(this.$API.getCheckRecordByMonth, {departmentId:this.departmentId}, true,false,true).then((res)=>{
                if(res){
                    for(var item of res){
                        this.spotCheckMonth.push([item.createTime, parseInt(item.count)]);
                    }
                    this.getReplaceData();
                }
            })
        },

        // 获取点巡检和更换可操作的数量
        getToDealNum: function(){
            //点巡检设备数目
            this.$http(this.$API.getCheckConfigNum, {departmentId:this.departmentId}, true,false,true).then((res)=>{
                if(res){
                    this.spotCheckNum = res.count;
                    if(res.waitcount){
                        this.replaceExecutedNum = res.waitcount;
                    }
                }
            })
            //更换设备数目
            this.$http(this.$API.getReplaceConfigCount, {departmentId:this.departmentId}, true,false,true).then((res)=>{
                if(res){
                this.replaceRecordNum = res.count;
                }
            })
        },

        departmentSelected: function(params) {
            if(!!params.id){
                this.curDepartment = params;
                this.departmentId = params.id;
            }
            else{
                this.departmentId = this.curDepartment.id
            }
            this.getRecordsData();
            this.getToDealNum();
        },
        drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'));
          myChart.setOption({
              color: '#fff',
              animation: false,
              title: {
                left: 'center',
              },
              legend: {
                textStyle: {
                  color: '#fff'
                },
                top: 'top',
                data:['点巡检工作记录','更换工作记录']
              },
              grid: {
                  top: 50,
                  left: 10,
                  right: 25,
                  height: 250,
                  containLabel:true
              },
              minInterval: 1,
              tooltip: {
                  triggerOn: 'item',
                  position: function (point, params, dom, rect, size) {
                    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                    // 提示框位置
                    var x = 0; // x坐标位置
                    var y = 0; // y坐标位置

                    // 当前鼠标位置
                    var pointX = point[0];
                    var pointY = point[1];

                    // 提示框大小
                    var boxWidth = size.contentSize[0];
                    var boxHeight = size.contentSize[1];

                    // boxWidth > pointX 说明鼠标左边放不下提示框
                    if (boxWidth > pointX) {
                        x = 5;
                    } else { // 左边放的下
                        x = pointX - boxWidth;
                    }

                    // boxHeight > pointY 说明鼠标上边放不下提示框
                    if (boxHeight > pointY) {
                        y = 5;
                    } else { // 上边放得下
                        y = pointY - boxHeight;
                    }
                    return [x, y];
                  }
              },
              xAxis: {
                  type: 'time',
                  // boundaryGap: [0, 0],
                  axisLine:{
                      lineStyle:{
                        color:'#fff'
                    }
                  },
                  axisLabel: {
                    color: '#fff',
                  },
                  axisPointer: {
                      value: this.spotCheckMonth[0][0],
                      snap: true,
                      color: '#fff',
                      lineStyle: {
                          color: '#004E52',
                          opacity: 0.5,
                          width: 2
                      },
                      label: {
                          show: true,
                          formatter: function (params) {
                              return this.$echarts.format.formatTime('yyyy-MM-dd', params.value);
                          },
                          backgroundColor: '#456de6'
                      },
                      /* handle: {
                          show: true,
                          color: '#456de6',
                      } */
                  },
                  splitLine: {
                      show: false
                  },
              },
              yAxis: {
                  type: 'value',
                  axisTick: {
                      inside: true
                  },
                  splitLine: {
                      show: false
                  },
                  axisLine:{
                      lineStyle:{
                        color:'#fff'
                    }
                  },
                  axisLabel: {
                    //   inside: true,
                      formatter: '{value}\n',
                      color: '#fff',
                  },
                  z: 10
              },
              series: [
                  {
                      name:'点巡检工作记录',
                      type:'line',
                      smooth: true,
                      symbol: 'circle',
                      symbolSize: 7,
                      sampling: 'average',
                      itemStyle: {
                          normal: {
                              color: '#456de6'
                          }
                      },
                      data: this.spotCheckMonth
                  },
                  {
                      name:'更换工作记录',
                      type:'line',
                      smooth:true,
                      symbol: 'circle',
                      symbolSize: 7,
                      sampling: 'average',
                      itemStyle: {
                          normal: {
                              color: '#d68262'
                          }
                      },
                      // data: this.replaceRecordMonth
                      data: [['2019-12-11',2],['2019-12-12',5],['2019-12-13',10]]
                  }

              ]
          })
        },

        //扫码添加
        scanAdd: function () {
            let strUrl = '';
            wx.ready(()=>{
                wx.scanQRCode({ // 微信扫一扫接口
                desc: 'scanQRCode desc',
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    //扫码之后返回设备信息，获取设备id，跳转对应页面
                    strUrl = res.resultStr;
                    if(strUrl.indexOf('scanLoginType') != -1){
                       window.location.href = strUrl
                    }else{
                      let name="state";
                      let reg = new RegExp('(^|&)' + name + '=([^&]*)(#|$)', 'i');
                      let r = strUrl.substr(1).match(reg);
                      let id = '';
                      if (r != null) {
                      id =  r[2].split("#")[0];
                      }
                      if(strUrl.indexOf(location.hostname) != -1){
                          window.location.href = _this.url + '/#/operaionManage/spotCheck/componentCheck?deviceId=' + id;
                      }else{
                         this.$commom.alert('请输入正确的手机号码');;
                      }
                    }
                  }
                })
            }).catch((err)=>{
                console.log("err:===>",err)
            });
        },
    }
}
</script>
<style>
@import '../../styles/iconfont.css';
    body{
        background-color: #22233f;
        height: 100%;
        width: 100%;
    }
    .main_wrap{
        margin: 0 auto;
        height: 100%;
        width: 100%;
    }

    .content_wrap{
        width: 100%;
        height: 100%;
        color:#fff;
    }
    .vux-slider .vux-icon-dot{
        background-color: #fff;
    }
    .content .vux-icon-dot.active{
        background: #456de6;
    }

    .divide_line{
        height: 20px;
    }
    .echart div{
        background-color: #22233f !important;
    }
    #app, .content{
      height: 100%;
      width: 100%;
    }
    .chart{
      width:100%;
      height: 60%;
      padding-top: 70px;
    }
    .menus{
        display: flex;
        width:90%;
        margin:auto;
    }
    .menus .spotCheck{
        flex:1;
        border-radius: 10px;
        padding-right: 10px;
    }
    .menus .backImg{
        display:inline-block;
        background-color: #4b61ac;
        border:1px solid #fff;
        border-radius: 4px;
        margin-left: 5px;
        margin-right: 10px;
        padding: 5px;
    }
    .menus .spotCheck .dSpan{
        float: right;
        width: 60px;
        margin-left: 16px;
    }
    .spotCheck div{
        background-color: #374fa3;
        padding: 10px;
        border-radius: 10px;
    }
    .changeManage div{
        background-color: #374fa3;
        padding: 10px;
        border-radius: 10px;
    }
    .menus .changeManage{
        padding-left:10px;
        flex:1;
        border-radius: 10px;
    }
    .spotCheck p:nth-child(1){
        display:flex;
        align-items: center;
        font-size: 18px;
        line-height: 60px;
    }
    .spotCheck p:nth-child(2){
        margin-top: 25px;
        font-size: 30px;
        font-weight: 600;
    }
    .spotCheck p:nth-child(3){
        font-size: 18px;
        margin-top: 10px;
    }

    .changeManage p:nth-child(1){
        display:flex;
        align-items: center;
        font-size: 18px;
        line-height: 60px;
        text-align:center;
    }
    .changeManage p:nth-child(2){
        font-size: 22px;
        text-align:center;
    }
    .changeManage p:nth-child(3){
        font-size: 16px;
        text-align:center;
    }
    #myChart>div:first-child>canvas{
      width: 100%!important;
      height: 100% !important;
    }

    .samallNumber{
        font-size: 14px !important;
    }
   @media screen and (width:320px){
     .chart{
        width:100% !important;
        height: 55% !important;
        padding-top: 70px !important;
        }

        .number{
            font-size: 25px !important;
        }
        #myChart>div:first-child>canvas{
            width: 100% !important;
            height: 100% !important;
        }
        #myChart>div:first-child{
            height: 290px;
        }
    }
     @media screen and (max-width:320px){
     .chart{
        width:100% !important;
        height: 70% !important;
        padding-top: 70px !important;
        }
        #myChart>div:first-child>canvas{
            width: 100%!important;
            height: 90% !important;
        }
    }
    @media screen and (min-width:321px) and (max-width:413px){
     .chart{
        width:100% !important;
        height: 56% !important;
        padding-top: 70px !important;
        }
        #myChart>div:first-child>canvas{
            width: 100%!important;
            height: 90% !important;
        }
    }
    @media screen and (min-width:414px) and (max-width:768px){
     .chart{
        width:100% !important;
        height: 60% !important;
        padding-top: 70px !important;
        }
        #myChart>div:first-child>canvas{
            width: 100%!important;
            height: 90% !important;
        }
    }
    @media screen and (min-width:769px){
     .chart{
        width:100% !important;
        height: 46% !important;
        padding-top: 70px !important;
        }
    }
    #myChart>div:first-child{
      margin:auto !important;
      width: 95% !important;
    }

    .department{
        height: 50px;
        color:#ffffff;
        width: 100%;
        position: absolute;
        z-index: 99;
        top: 0;
    }
    .department .header{
        width:35% !important;
        padding: 16px 0;
        position: absolute !important;
        top: 0px;
    }
    .department .bgtu{
        width: 100%;
        height: 50px;
    }
    .department .bgtu .iconBack{
        width: 30px;
        height: 30px;
        position: absolute;
        top:0px;
        right:0px;
        /* border-radius: 4em; */
        margin: 6px 13px;
        float: right;
        /* background: rgb(3, 6, 28); */
        z-index:999;
        text-align: center;
        /* border: 1px #456de6 solid; */
    }
</style>
